<template>
	<view class="container">
		<view class="header">
			<view class="back" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="title">解梦结果</text>
		</view>
		
		<view class="result-card">
			<view class="dream-content">
				<text class="section-title">梦境内容</text>
				<text class="content-text">{{dreamContent}}</text>
			</view>
			
			<view class="divider"></view>
			
			<view class="interpretation">
				<text class="section-title">AI解析</text>
				<view class="interpretation-content">
					<text class="hint-text">这个梦境象征着：</text>
					<view class="points">
						<text class="point">1. {{interpretation.point1}}</text>
						<text class="point">2. {{interpretation.point2}}</text>
						<text class="point">3. {{interpretation.point3}}</text>
					</view>
				</view>
			</view>
			
			<view class="actions">
				<button class="share-btn" @click="handleShare">分享解梦</button>
				<button class="collect-btn" @click="handleCollect">{{isCollected ? '已收藏' : '收藏'}}</button>
			</view>
		</view>
		
		<view class="related">
			<text class="section-title">相关解梦</text>
			<view class="related-items">
				<view class="related-item" 
					v-for="(item, index) in relatedDreams" 
					:key="index" 
					@click="viewRelated(item)">
					<view class="item-info">
						<text class="item-title">{{item.title}}</text>
						<text class="item-count">{{item.count}}次解梦</text>
					</view>
					<text class="arrow-icon">→</text>
				</view>
			</view>
			
			<view class="related-tags">
				<text class="tag-title">热门标签</text>
				<view class="tags-container">
					<text class="dream-tag" 
						v-for="(tag, index) in dreamTags" 
						:key="index"
						@click="searchByTag(tag)">
						{{tag}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dreamContent: '',
			interpretation: {
				point1: '内心渴望自由和突破',
				point2: '正在经历人生的转折点',
				point3: '对未来充满期待和想象'
			},
			isCollected: false,
			relatedDreams: [
				{
					id: 1,
					title: '梦见在空中飞翔',
					content: '在空中飞翔',
					count: '2.3万',
					interpretation: {
						point1: '渴望自由和突破现状的心理暗示',
						point2: '对理想和目标的强烈追求',
						point3: '暗示即将到来的机遇和转机'
					}
				},
				{
					id: 2,
					title: '梦见星空',
					content: '星空',
					count: '1.8万',
					interpretation: {
						point1: '对未来充满希望和期待',
						point2: '内心追求卓越和理想',
						point3: '暗示将有新的机遇出现'
					}
				},
				{
					id: 3,
					title: '梦见在飞机上',
					content: '在飞机上',
					count: '1.5万',
					interpretation: {
						point1: '事业或生活即将上升',
						point2: '新的发展机会将要到来',
						point3: '对目标充满信心和期待'
					}
				}
			],
			dreamTags: [
				'飞翔', '追逐', '考试', 
				'迷路', '下落', '奔跑',
				'遇险', '相遇', '分离'
			]
		}
	},
	onLoad(options) {
		if (options.content) {
			this.dreamContent = decodeURIComponent(options.content)
		}
		
		// 如果是从相关解梦跳转来的，根据id查找对应的解梦数据
		if (options.id) {
			const relatedDream = this.relatedDreams.find(item => item.id == options.id)
			if (relatedDream) {
				this.dreamContent = relatedDream.content
				this.interpretation = relatedDream.interpretation
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		handleShare() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		handleCollect() {
			this.isCollected = !this.isCollected
			uni.showToast({
				title: this.isCollected ? '收藏成功' : '已取消收藏',
				icon: 'success'
			})
		},
		viewRelated(item) {
			// 直接使用简单的内容
			uni.navigateTo({
				url: `/pages/result/result?id=${item.id}&content=${encodeURIComponent(item.content)}`
			})
		},
		searchByTag(tag) {
			// 点击标签时，直接将标签作为梦境内容
			uni.navigateTo({
				url: `/pages/result/result?content=${encodeURIComponent(tag)}`,
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 30rpx;
}

.header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.back {
	margin-right: 20rpx;
}

.back-icon {
	font-size: 40rpx;
	color: #666;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.result-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.content-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.divider {
	height: 1rpx;
	background: #eee;
	margin: 30rpx 0;
}

.interpretation-content {
	font-size: 28rpx;
	color: #666;
}

.hint-text {
	margin-bottom: 20rpx;
	display: block;
}

.points {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.point {
	line-height: 1.6;
}

.actions {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
}

.share-btn, .collect-btn {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 28rpx;
}

.share-btn {
	background: #4080ff;
	color: #fff;
}

.collect-btn {
	background: #fff;
	color: #4080ff;
	border: 2rpx solid #4080ff;
}

.related {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.related-items {
	display: flex;
	flex-direction: column;
}

.related-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.related-item:last-child {
	border-bottom: none;
}

.item-info {
	flex: 1;
}

.item-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	display: block;
}

.item-count {
	font-size: 24rpx;
	color: #999;
}

.arrow-icon {
	color: #999;
	font-size: 32rpx;
	margin-left: 20rpx;
}

.related-tags {
	margin-top: 30rpx;
	padding-top: 30rpx;
	border-top: 2rpx solid #f5f5f5;
}

.tag-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.dream-tag {
	padding: 12rpx 24rpx;
	background: #f0f6ff;
	color: #4080ff;
	border-radius: 30rpx;
	font-size: 26rpx;
}
</style> 